<template lang="pug">
  div
    el-divider
    h3 最后更新时间{{time}}
    div
      el-radio-group(v-model="n")
        el-radio-button(label="500")
        el-radio-button(label="1500")
        el-radio-button(label="2000")
        el-radio-button(label="2500")
        el-radio-button(label="3000")
        el-radio-button(label="3500")
    //- el-checkbox-group(v-model="checkList")
    //-   el-checkbox(v-for='l in legend' :label='l')
    //- el-button(size='mini' @click='getData') 刷新
    div(v-for='l in legend').charts {{l}}
      div.stockPrice( :id='l')

    //- div
    //-   h5(v-for='item in growth')
    //-     span(style='color:blue' v-if='item.growth>0') {{item.name}}--{{item.growth}}
    //-     span(style='color:red' v-else) {{item.name}}--{{item.growth}}
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'stockPrice',
  components: {},
  props: {
    socket: Object
  },
  data () {
    return {
      time: '',
      chart: {},
      n: 500,
      legend: [
        'ECP',
        'MGCP',
        'BLD',
        'CLRK',
        'OMTK',
        'FSIG',
        'KGI',
        'FLCM',
        'STM',
        'DCOMM',
        'HLS',
        'VITA',
        'ICRS',
        'UNV',
        'AERO',
        'OMN',
        'SLRS',
        'GPH',
        'NVMD',
        'WDS',
        'LXO',
        'RHOC',
        'APHE',
        'SYSC',
        'CTK',
        'NTLK',
        'OMGA',
        'FNS',
        'JGN',
        'SGC',
        'CTYS',
        'MDYN',
        'TITN'
      ],
      checkList: [],
      sense: 10,
      growth: []
    }
  },
  mounted: function () {
    let that = this
    for (let l of that.legend) {
      console.log(l)
    }
    that.$nextTick(function () {
      for (let l of that.legend) {
        console.log(l)
        console.log(document.getElementById(l))
        that.chart[l] = echarts.init(document.getElementById(l))
        that.chart[l].setOption({
          tooltip: {
            trigger: 'axis'
          },
          // legend: {
          //   data: that.legend
          // },
          grid: {
            top: '4%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          xAxis: {
            type: 'category',
            boundaryGap: false
          },
          yAxis: {
            type: 'value'
          },
          series: []
        })
      }
    })
    this.getData()
    for (let l of that.legend) {
      that.checkList.push(l)
    }
    setInterval(function () {
      that.getData()
    }, 6000)
  },
  methods: {
    getData: function () {
      let that = this
      that.loading = true
      that.$axios
        .post(that.$root.URL + '/stock', { n: that.n })
        .then(function (response) {
          let data = {}
          that.legend = Object.keys(response.data.data[0].p)
          for (let ii = 0; ii < response.data.data.length; ii++) {
            let thisData = response.data.data[ii].p
            for (let jj = 0; jj < that.legend.length; jj++) {
              let s = that.legend[jj]
              if (data[s]) {
                data[s].push(thisData[s])
              } else {
                data[s] = []
                data[s].push(thisData[s])
              }
            }
          }

          that.growth = []
          for (let s of that.legend) {
            let ss = []
            if (that.checkList.includes(s)) {
              data[s].reverse()
              ss.push({
                name: s,
                type: 'line',
                data: data[s]
              })
              let sense = that.sense
              let senses = []
              let target = data[s]
              for (let ii = 0; ii < target.length; ii++) {
                let ts = 0
                for (let j = 0; j < sense; j++) {
                  ts += target[ii - j < 0 ? 0 : ii - j]
                }
                senses.push(ts / sense)
              }
              ss.push({
                name: s + '-analysis',
                type: 'line',
                data: senses
              })
              if (senses.length > 2) {
                that.growth.push({
                  name: s,
                  growth:
                    (senses[senses.length - 1] - senses[senses.length - 2]) /
                    senses[senses.length - 2]
                })
              }
            }
            that.chart[s].setOption({
              tooltip: {
                trigger: 'axis'
              },
              // legend: {
              //   data: that.legend
              // },
              xAxis: {
                type: 'category',
                boundaryGap: false
              },
              yAxis: {
                type: 'value'
              },
              series: []
            })
            that.chart[s].setOption({
              tooltip: {
                trigger: 'axis'
              },
              // legend: {
              //   data: that.legend
              // },
              xAxis: {
                type: 'category',
                boundaryGap: false
              },
              yAxis: {
                type: 'value'
              },
              series: ss
            })
          }
          that.time = new Date(response.data.data[0].t).toLocaleString()
          that.growth = that.growth.sort(function (a, b) {
            return b.growth - a.growth
          })
          that.$axios.post(that.$root.URL + '/cmd', { data: that.growth })
        })
        .catch(function (error) {
          console.log(error)
          that.loading = false
          that.$message.error(error.toString())
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.charts {
  display: inline-block;
}
.stockPrice {
  height: 200px;
  width: 200px;
}
</style>
